<template>
	<view>
		<view class="applyTab flex-row justify-between">
			<view class="flex-row">
				<button
					:class="currentActive == 1 ? 'active' : ''"
					@click="handleClick(1)"
				>
					全部活动
				</button>
				<button
					:class="currentActive == 2 ? 'active' : ''"
					@click="handleClick(2)"
				>
					待入群
				</button>
			</view>
		</view>

		<view class="list" v-if="currentActive == 1">
			<view class="item" v-for="(item, index) in searchGroupList" :key="index">
				<view class="flex-row justify-between">
					<text>活动名称：{{ item.group_purchase_name }}</text>
					<text class="none" v-if="item.qun_status == 0">待入群</text>
					<text class="join" v-else>已入群</text>
				</view>
				<view> 活动时间：{{ item.vld_start_time }} </view>
			</view>
		</view>

		<view class="list" v-else>
			<view v-for="(item, index) in searchGroupList" :key="index">
				<view class="item" v-if="item.qun_status == 0">
					<template>
						<view class="flex-row justify-between">
							<text>活动名称：{{ item.group_purchase_name }}</text>
							<text class="none">待入群</text>
						</view>
						<view> 活动时间：{{ item.vld_start_time }} </view>
					</template>
				</view>
			</view>
		</view>
		<view class="errText" v-if="!searchGroupList.length || !searchGroupList"
			>暂无活动~</view
		>
	</view>
</template>
<script>
export default {
	props: {
		searchGroupList: {
			type: Array,
			default: [],
		},
	},
	data() {
		return {
			currentActive: 1,
			content:
				"有时候需要展示的内容是从后端获取的，组件内部的mounted生命周期初始化时，请求尚未回来，会导致 内容的高度在初始化有误差。可以在请求完毕渲染后(指的是this.$nextTick)，通过ref调用组件的init方法，重新初始化",
		};
	},
	methods: {
		handleClick(num) {
			this.currentActive = num;
			this.$emit("setSearchGroupData", num);
		},
	},
};
</script>
<style lang="scss" scoped>
.applyTab {
	button {
		margin: 0;
		padding: 0;
		font-size: 24rpx;
		width: 120rpx;
		height: 48rpx;
		line-height: 48rpx;
	}
	& > view {
		button:first-child {
			// color: #159eec;
			&::after {
				// border-color: #159eec;
				border-width: 2rpx;
				border-radius: 50rpx;
			}
		}
		button:last-child {
			color: #9999a5;
			margin: 0 36rpx 0;
			&::after {
				border-color: #9999a5;
				border-width: 2rpx;
				border-radius: 50rpx;
			}
		}
	}
}
.list {
	.item:last-child {
		border: none;
	}
	.item {
		padding: 28rpx 0;
		border-bottom: 1rpx solid #dcdcdc;
		& > view:first-child {
			margin-bottom: 8rpx;
		}
		.none {
			color: #e01212;
		}
		.join {
			color: #159eec;
		}
	}
}
.active {
	color: #159eec !important;
}

.errText {
	padding: 20rpx 0;
	text-align: center;
}
</style>
